<template>
  <div>
     <!--头部搜索栏开始-->
    <van-row>
      <van-sticky>
        <van-field clearable label="春日专属" placeholder="请输入商品名" v-model="goodsname" >
          <template #button> <!--搜索按钮-->
             <van-button size="small" type="primary" @click="search()">搜索</van-button>
          </template>
        </van-field>
      </van-sticky>
    </van-row>
    <!--头部搜索栏结束-->
    <!--左侧分类导航开始-->
    <van-row>
      <van-col span="6">
        <van-sticky :offset-top="46">
          <van-sidebar v-model="selectKey" @change="onchange">
            <van-sidebar-item v-for="(item,i) in categoryList" :key="i" :title="item.title">
            </van-sidebar-item>
          </van-sidebar>
        </van-sticky>
      </van-col>

    <!--左侧分类导航结束-->

    <!--商品卡片列表开始-->
    <van-col span="18">
      <van-pull-refresh @refresh="ref" success-text="刷新成功!" v-model="isLoading"><!--刷新-->
        <van-list>
          <van-card v-for="(item,i) in goodsList" :key="i"
          :price="formatPrice(item.price)"
          :desc="item.spec"
          :title="item.goodname"
          :thumb="item.imgurl"
          @click="todetail(item.goodid)"  
          >
          </van-card>
        </van-list>
      </van-pull-refresh>
    </van-col>
    <!--商品卡片列表结束-->
        </van-row>
  </div>
</template>

<script>
  import request, { getUrl } from "../../utils/request";
  import { showDlg } from "../../utils/tools";
  import {removeStorageToken,getStorageUser,setStorageUser} from "@/utils/storage.js"//导入
  export default{
    data() {
      return{
        goodsname:"",
        selectKey:0,//绑定的索引值
        isLoading:true,//默认加载中 false：加载成功！
        categoryList:[],//商品类型列表
        goodsList:[]//商品列表
      }
    },
    created() {//页面加载的时候，需要加载左边导航栏和导航栏第一项的所有商品
       var that = this;
        request({ //请求左侧导航栏
            url:getUrl("Goods/getGoodsTypeList"),//URL
            method:"get"
        }).then(res=>{
          if(res.data.code==0){//左侧导航栏数据请求成功！
              var objStr = JSON.stringify(res.data.data)
              objStr= objStr.replaceAll("typename","title")   //前后端字段没对上，第一种办法：通过修改后端传入的值的名称来实现
              var obj = JSON.parse(objStr);
              console.log(obj)
              that.categoryList=obj//赋值给左侧导航栏
            /**请求商品列表开始**/
            request({
              url:getUrl("Goods/getGoodsListByType"),//URL
              method:"get",
              params:{
                typeid:that.categoryList[0].typeid//返回列表的第0个
              }
            }).then(res=>{//前后端字段没对上，第二种办法：通过修改组件来实现
               if(res.data.code==0){
                 that.goodsList=res.data.data
               }
            }).catch(error=>{
              showDlg("错误提示","网络错误！")
            })
            /**请求商品列表结束**/
          }

        }).catch(error=>{
          showDlg("错误提示","网络错误！")
        })
    },
    methods:{
      onchange(index){//左侧导航栏 改变时间，会将选中按钮的索引值返回，向后端请求当前选中导航栏的商品数据
            /**请求商品列表开始**/
            var that = this;
            request({
              url:getUrl("Goods/getGoodsListByType"),//URL
              method:"get",
              params:{
                typeid:that.categoryList[index].typeid//返回列表的第index个
              }
            }).then(res=>{
               if(res.data.code==0){
                 that.goodsList=res.data.data
               }
            }).catch(error=>{
              showDlg("错误提示","网络错误！")
            })
            /**请求商品列表结束**/
      },
      ref(){//下拉刷新，重新请求当前选中按钮的商品
             var that = this;
            /**请求商品列表开始**/
            request({
                url:getUrl("Goods/getGoodsListByType"),//URL
                method:"get",
                params:{
                  typeid:that.categoryList[that.selectKey].typeid//返回列表的第index个
                }
            }).then(res=>{
              if(res.data.code==0){
                 that.goodsList=res.data.data
                 that.isLoading=false
               }
            }).catch(error=>{
              showDlg("错误提示","网络错误！")
            })
            /**请求商品列表结束**/
      },
      search:function(){//搜索商品
       var that = this;
        /**请求商品列表开始**/
        request({
          url:getUrl("Goods/getGoodsListBySearch"),//URL
          method:"get",
          params:{
            goodsname:that.goodsname
          }
        }).then(res=>{
        if(res.data.code==0){
          var loc =0;
          for(var i=0;i<that.categoryList.length;i++){
              if (that.categoryList[i].typeid==res.data.data[0].typeid){
                that.selectKey=i
                break
              }
          }
        }
        }).catch(error=>{
          showDlg("错误提示","网络错误！")
        })
        /**请求商品列表结束**/
      },
      formatPrice(price){//格式化价格
        return (price*100/100).toFixed(2);
      },
      todetail(goodsid){//跳转到制定商品详情
        this.$router.push("/goodsdetail?goodsid="+goodsid);
      }
    }

  }
</script>

<style>
  .van-sidebar {
    width: 100px;
  }

  .van-sidebar-item {
    padding: 10px;
  }

  .van-card {
    font-size: 14px;

    .van-card__content {
      justify-content: center;

      .van-card__price {
        color: red;
        font-weight: bold;
        text-align: right;
      }
    }
  }
</style>
